<template>
  <div class="app-container">
    <TopCards
      :from-list="fromList"
      :form-data="formData"
      @searchForm="searchForm"
      @resetForm="resetForm"
    />
    <el-card class="TableCard">
      <el-row type="flex">
        <el-col :span="18">
          <el-button
            round
            class="newAdd"
            @click="addwarehouse"
          >新增仓库</el-button>
        </el-col>
        <el-col :span="6">
          <el-row>
            <el-col :span="12">
              <el-button
                round
                class="Info"
                @click="exportExcel"
              >下载库区模板</el-button></el-col>
            <el-col :span="12">
              <el-button
                round
                class="Info"
                @click="addwarehouse"
              >导入库区信息</el-button></el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-table
        :data="list"
        border
        style="width: 100%"
        stripe
        :header-cell-style="{
          'background-color': 'rgb(249, 246, 238)',
          height: '3.2vw',
          padding: '0',
          'font-size': '0.9vw',
          color: '#887e7e',
          'font-weight': '500',
        }"
      >
        <el-table-column type="index" label="序号" width="120" />
        <el-table-column prop="warehouseName" label="所属仓库" width="120" />
        <el-table-column prop="code" label="库区编号" width="120" />
        <el-table-column prop="name" label="库区名称" width="120" />
        <el-table-column prop="temperatureType" label="温度类型" width="120" />
        <el-table-column prop="bearingType" label="承重类型" width="120" />

        <el-table-column prop="useType" label="用途属性" width="120" />
        <el-table-column prop="status" label="库区状态" width="120">
          <template slot-scope="{ row }">
            {{ statusList[+row.status] || "未知" }}
          </template>
        </el-table-column>
        <el-table-column prop="personName" label="负责人" width="120" />
        <el-table-column prop="phone" label="联系电话" width="120" />
        <el-table-column prop="includedNum" label="库位数量" width="120" />
        <el-table-column prop="updateTime" label="更新时间" width="150" />
        <el-table-column fixed="right" label="操作" width="170">
          <template slot-scope="{ row }">
            <el-button type="text" size="small" @click="editFn(row.id)">编辑</el-button>
            <el-button
              v-if="row.status === 0"
              type="text"
              size="small"
              @click="CloseUse(row)"
            >停用</el-button>
            <el-button
              v-else
              type="text"
              size="small"
              @click="OpenUse(row)"
            >启用</el-button>
            <el-button type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="divBasePagination">
        <el-pagination
          :current-page="page.current"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="page.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import { warehousePage } from '@/api/baseInfo/area'
import { statusList } from '@/utils/transferTxt'
export default {
  data() {
    return {
      fromList: [
        {
          label: '库区名称',
          prop: 'name',
          type: 'input'
        }, // 仓库编号
        {
          label: '库位名称',
          prop: 'areaName',
          type: 'input'
        },
        {
          label: '库位状态',
          prop: 'status',
          type: 'select', // 仓库状态
          options: [
            {
              label: '全部',
              value: null
            },
            {
              label: '停用',
              value: 1
            },
            {
              label: '启用',
              value: null
            }
          ]
        }
      ],
      formData: {
        name: '',
        areaName: '',
        status: ''
      },
      page: {
        current: 1,
        size: 10
      },
      currentPage4: 4,
      total: 0,
      list: [],
      typeList: {},
      statusList: {}
    }
  },
  created() {
    this.warehousePage()
    this.statusList = statusList
  },
  methods: {
    // 1. 搜索
    searchForm(val) {
      this.warehousePage(val)
    },
    // 1.2.重置表单
    resetForm() {
      this.formData = {
        name: '',
        areaName: '',
        status: ''
      }
      this.warehousePage()
    },
    // 2.表格
    async warehousePage(form) {
      const { data } = await warehousePage({ ...this.page, ...form })
      this.list = data.records
      this.total = Number(data.total)
    },
    // 3.分页
    // 3.1--下拉框选择表格数据
    handleSizeChange(val) {
      this.page.size = val
      this.warehousePage()
    },
    // 3.2--输入框改变页数
    handleCurrentChange(val) {
      this.page.current = val
      this.warehousePage()
    },
    // 4.新增仓库
    addwarehouse() {
      this.$router.push('area/details/null')
    },
    // 4.1/编辑
    editFn(id) {
      this.$router.push(`area/details/${id}`)
    },
    // 5.停用启用
    OpenUse(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '确定停用', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 6.导出
    exportExcel() {
      window.location.href = '../../areaTemplate.xlsx'
    }
  }
}
</script>

<style lang="scss">
.el-table td,
.el-table th {
  padding: 2px;
}
</style>
